<template>
  <div>
     <h4>查询书籍信息:</h4>
     <div>
         <button @click="SELECTALL">查询所有书籍信息</button>
     </div>
     <br>
     <br>
    <div>
      <span>book:</span>
      <input type="text" placeholder="input the book name" v-model="bname">
    <button @click="btn">select</button>
    </div>
    <ul>
        <li v-for="obj in list" :key="obj.id">
            <span>书名:{{obj.bookname}}</span>&nbsp;&nbsp;&nbsp;
            <span>作者:{{obj.author}}</span>&nbsp;&nbsp;&nbsp;
            <span>出版社:{{obj.publisher}}</span>
        </li>
    </ul>
      <p v-if="isShow && list.length==0">没有这本书籍的信息</p>
      <div>
      <h4>3. 新增图书信息</h4>
      <input type="text" placeholder="书名" v-model="obj.bookname"/>
      <input type="text" placeholder="作者" v-model="obj.author"/>
      <input type="text" placeholder="出版社" v-model="obj.publisher"/>
    </div>
    <button @click="addFn">点击新增图书</button>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL="http://123.57.109.30:3006"
export default {
data() {
    return {
      bname: "",
      obj: {
          bookname: "",
          author: "",
          publisher: ""
      },
      list:[],
      isShow:false
    };
  },
  methods: {
      SELECTALL(){
axios({
 url: "/api/getbooks",
}).then(res=>{
    console.log(res)
})
      },
    btn() {
      axios({
        method: "GET",
        url: "/api/getbooks",
        params: {
          bookname: this.bname,
        },
      })
        .then((res) => 
        {this.list=res.data.data
            if(this.list.length==0){
                this.isShow=true
            }else{
                 this.isShow=false
            }
        })
        .catch((err) => console.log(err));
    },
    addFn(){
        axios({
            method:"POST",
            url:"/api/addbook",
            data:{
                ...this.obj,
                appkey:"7250d3eb-18e1-41bc-8bb2-11483665535a"
            }
        }).then(res=>{
            console.log(res)
        })
    }
  },

}
</script>

<style>

</style>